import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
import MapContainer from './MapContainer';
import MapContainerBackup from './MapContainerBackup';

const MapSelector: React.FC = () => {
  const [useNativeMap, setUseNativeMap] = useState(false);
  const [errorCount, setErrorCount] = useState(0);

  const handleMapError = () => {
    setErrorCount(prev => prev + 1);
    if (errorCount < 1) {
      Alert.alert(
        '地图加载失败',
        '是否尝试使用备用地图?',
        [
          { 
            text: '取消',
            style: 'cancel'
          },
          {
            text: '使用备用地图',
            onPress: () => setUseNativeMap(false)
          }
        ]
      );
    } else {
      setUseNativeMap(false);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.mapContainer}>
        {useNativeMap ? (
          <MapContainer onError={handleMapError} />
        ) : (
          <MapContainerBackup />
        )}
      </View>
      
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[styles.button, useNativeMap ? styles.activeButton : null]}
          onPress={() => setUseNativeMap(true)}
        >
          <Text style={styles.buttonText}>原生地图</Text>
        </TouchableOpacity>
        
        <TouchableOpacity
          style={[styles.button, !useNativeMap ? styles.activeButton : null]}
          onPress={() => setUseNativeMap(false)}
        >
          <Text style={styles.buttonText}>网页地图</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mapContainer: {
    flex: 1,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10,
    backgroundColor: '#f8f8f8',
    borderTopWidth: 1,
    borderTopColor: '#ddd',
  },
  button: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 20,
    backgroundColor: '#eee',
  },
  activeButton: {
    backgroundColor: '#007AFF',
  },
  buttonText: {
    color: '#333',
    fontWeight: 'bold',
  },
});

export default MapSelector; 